<template>
  <div class="app-container">
     
    <!-- <el-row :gutter="30" type="flex" style=" padding: 10px 0;">
      <el-col :span="6" >
              <div style="display: flex;align-items: center;justify-content: space-between;">
                 {{ $t("机柜号123") }}：<el-input v-model="device_id" style="flex: 1;" :placeholder="$t('请输入机柜号')"></el-input>
              </div>
      </el-col>
       <el-col :span="6" >
              <div style="display: flex;align-items: center;justify-content: space-between;">
                 {{ $t("机柜号") }}：
                 <el-select style="flex: 1;"  v-model="salesmanVal" :placeholder="$t('请选择')" @change="salesmanChange">
            <el-option v-for="item in salesmanArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
              </div>
      </el-col>
       <el-col :span="6" >
                <div style="display: flex;align-items: center;justify-content: space-between;">
                   {{ $t("机柜号") }}：<el-input v-model="device_id" style="flex: 1;" :placeholder="$t('请输入机柜号')"></el-input>
                </div>
        </el-col>
         <el-col :span="6" >
                <div style="display: flex;align-items: center;justify-content: space-between;">
                   {{ $t("机柜号") }}：<el-input v-model="device_id" style="flex: 1;" :placeholder="$t('请输入机柜号')"></el-input>
                </div>
        </el-col>
    </el-row>
     <el-row :gutter="30" type="flex">
        <el-col :span="6" >
                <div style="display: flex;align-items: center;justify-content: space-between;">
                   {{ $t("机柜号") }}：<el-input v-model="device_id" style="flex: 1;" :placeholder="$t('请输入机柜号')"></el-input>
                </div>
        </el-col>
         <el-col :span="6" >
                <div style="display: flex;align-items: center;justify-content: space-between;">
                   {{ $t("机柜号") }}：<el-input v-model="device_id" style="flex: 1;" :placeholder="$t('请输入机柜号')"></el-input>
                </div>
        </el-col>
         <el-col :span="6" >
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                     {{ $t("机柜号") }}：<el-input v-model="device_id" style="flex: 1;" :placeholder="$t('请输入机柜号')"></el-input>
                  </div>
          </el-col>
           <el-col :span="6" >
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                     {{ $t("机柜号") }}：<el-input v-model="device_id" style="flex: 1;" :placeholder="$t('请输入机柜号')"></el-input>
                  </div>
          </el-col>
      </el-row> -->

    <div class="head_search u-f u-f-ac u-fw border_bottom">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("机柜号") }}：</p>
        <el-input v-model="device_id" :placeholder="$t('请输入机柜号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("二维码") }}：</p>
        <el-input v-model="qrcode" :placeholder="$t('请输入二维码')"></el-input>
      </div>
      <div class="div_box u-f u-f-ac" v-if="shangjia">
        <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openAgentList(1)">
          <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent(1)">{{ $t("清除") }}</button>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb" v-if="shangjia" style="width: 290px;">
        <p class="label font14 text_black">{{ $t("所属业务员") }}：</p>
        <el-select v-model="salesmanVal" :placeholder="$t('请选择')" @change="salesmanChange">
          <el-option v-for="item in salesmanArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属商户") }}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openMerchantList(1)">
          <p class="text-ellipsis">{{ merchant ? merchant : $t("选择商户") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearMerchant(1)">{{ $t("清除") }}</button>
      </div>

      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("机柜型号") }}：</p>
        <el-select v-model="modelVal" :placeholder="$t('请选择')" @change="modelChange">
          <el-option v-for="(item, index) in equipmentModel" :key="item.id" :label="item.name" :value="index"></el-option>
        </el-select>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("在线状态") }}：</p>
        <el-select v-model="clientVal" :placeholder="$t('请选择')" @change="clientChange">
          <el-option v-for="item in clientArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("是否绑定") }}：</p>
        <el-select v-model="clientVal1" :placeholder="$t('请选择')" @change="clientChange1">
          <el-option v-for="item in clientArr1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <!-- <div class="select_box u-f u-f-ac u-f-jsb" v-show="clientVal == 2">
        <p class="label font14 text_black">{{ $t("离线天数") }}：</p>
        <el-select v-model="outlineDayVal" :placeholder="$t('请选择')" @change="outlineChange">
          <el-option v-for="item in outlineDayArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div> -->

      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">{{ $t("提交") }}</button>
    </div>

    <div class="head_options u-f u-f-ac u-fw">
      <button class="sub_btn font14 text_white bg_blue" @click="addCabinet"
        v-if="permissions.indexOf('/equipment/add') != -1&&memusid!=6&&memusid!=5">
        {{ $t("添加机柜信息") }}
      </button>
      <button class="sub_btn font14 text_white bg_blue" @click="addMoreCabinet"
        v-if="permissions.indexOf('/equipment/execlAdd') != -1&&memusid!=6&&memusid!=5">{{ $t("批量添加机柜信息") }}</button>

      <button class="sub_btn font14 text_white bg_blue" @click="bindAgent"
        v-if="permissions.indexOf('/equipment/agencyBind') != -1">{{ $t("绑定代理和商户") }}</button>
      <button class="sub_btn font14 text_white bg_blue" @click="restartMoreCabinet"
        v-if="permissions.indexOf('/equipment/restart') != -1">{{ $t("重启机柜") }}</button>
      <div class="txt_list u-f u-f-ac">
        <span class="lable font14 text_black">{{ $t("总数量") }}：</span>
        <span class="txt font14 text_black">{{ stock_num }}</span>
      </div>
      <div class="txt_list u-f u-f-ac">
        <span class="lable font14 text_black">{{ $t("在线数量") }}：</span>
        <span class="txt font14 text_blue">{{ online_num }}</span>
      </div>
      <div class="txt_list u-f u-f-ac">
        <span class="lable font14 text_black">{{ $t("离线数量") }}：</span>
        <span class="txt font14 text_danger">{{ outline_num }}</span>
      </div>
    </div>

    <div>
      <el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }">
        <!-- <el-table-column prop="id" :label="$t('序列号')"></el-table-column> -->
        <el-table-column prop="cabinet_id" :label="$t('机柜号')" width="160"></el-table-column>
        <el-table-column prop="qrcode" :label="$t('二维码')" width="150">
          <template slot-scope="{ row }">
            <p class="text_blue qrcode" @click="viewQrcode(row.qrcode)">
              <i class="icon iconfont iconerweima text_blue"></i>
              {{ $t("查看") }}
            </p>
            {{ row.qrcode }}
          </template>
        </el-table-column>
        <el-table-column prop="line" :label="$t('状态')">
          <template slot-scope="{ row }">
            <span class="cabinet_status bg_blue text_white" v-if="row.line == 'online'">{{ $t("在线") }}</span>
            <span class="cabinet_status text_white bg_light" v-if="row.line == 'offline'">{{ $t("离线") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" :label="$t('所在商铺')"></el-table-column>
        <el-table-column prop="model" :label="$t('机柜型号')"></el-table-column>
        <el-table-column prop="address" :label="$t('所在区域')"></el-table-column>
        <el-table-column prop="device_num" :label="$t('充电槽数量')"></el-table-column>
        <el-table-column prop="heart_time" width="160" :label="$t('心跳时间')"></el-table-column>
        <el-table-column prop="create_time" width="160" :label="$t('录入时间')"></el-table-column>
        <el-table-column prop="borrow_num" :label="$t('可借 / 可还')">
          <template slot-scope="{ row }">
            <div style="display: flex;align-items: center;justify-content: space-around">
              <p class="circle u-f u-f-ac u-f-jc text_white font18 bg_blue">{{ row.borrow_num }}</p>
              <span style="font-size: 30px;">/</span>
              <p class="circle u-f u-f-ac u-f-jc text_white font18 bg_danger">{{ row.return_num }}</p>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="return_num" :label="$t('可还')">
          <template slot-scope="{ row }">
            <p class="circle u-f u-f-ac u-f-jc text_white font18 bg_danger">{{ row.return_num }}</p>
          </template>
        </el-table-column> -->


        <el-table-column prop="agency_name" :label="$t('代理商')"></el-table-column>
        <el-table-column prop="employee_name" :label="$t('业务员')"></el-table-column>
        <el-table-column prop="memo" :label="$t('备注')"></el-table-column>
        <el-table-column :label="$t('操作')" width="180" fixed="right" v-if="memusid!=6">
          <template slot-scope="scope">
            <button v-if="permissions.indexOf('/equipment/detail') != -1" class="table_btn font12 bg_blue text_white"
              style="margin-right: 20px;margin-bottom: 10px;" @click="deviceDetail(scope.row)">{{ $t("设备详情") }}</button>
            <button v-if="permissions.indexOf('/equipment/edit') != -1" class="table_btn font12 bg_blue text_white"
              style="margin-bottom: 10px;" @click="updateDevice(scope.row)">{{ $t("修改") }}</button>
            <button v-if="permissions.indexOf('/equipment/trend') != -1" class="table_btn font12 bg_blue text_white"
              style="margin-right: 20px;" @click="statistics(scope.row)">{{ $t("租借统计") }}</button>

            <button v-if="permissions.indexOf('/equipment/delete') != -1" class="table_btn font12 bg_danger text_white"
              @click="deleteCanTab(scope.row)">{{ $t("删除") }}</button>




            <button v-if="permissions.indexOf('/equipment/trend') != -1" class="table_btn font12 bg_blue text_white"
              style="margin-right: 20px;margin-top: 10px;" @click="transferLogShow(scope.row)">{{ $t("划拨日志") }}</button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="page_size"
          layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>

    <!-- 添加和修改机柜信息 -->
    <el-dialog :title="updateCab ? $t('修改机柜信息') : $t('添加机柜信息')" width="900px" :visible.sync="showAddCab"
      :close-on-click-modal="false" @close="agentType = 1">
      <!-- <el-form  :inline="true" :model="ruleForm"  ref="ruleForm" label-width="130px" class="demo-ruleForm" label-suffix=":">
        <el-form-item label="活动名称" prop="name" >
          <el-input v-model="ruleForm.name" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('所属商户')" prop="name">
            <el-select v-model="addDevTypeVal" :placeholder="$t('请选择')" @change="addDevTypeChange">
              <el-option v-for="(item, index) in addDevTypeArr" :key="item.id" :label="item.name"
                :value="index"></el-option>
            </el-select>
          </el-form-item>
          
      </el-form> -->
      <div class="order_detail">

        <div class="execl_list u-f u-f-ac" v-if="!updateCab && addMoreCab">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("选择") }}excel：</span>
          </p>
          <upload-excel :on-success="execlSuccess" :text="$t('导入文件')"></upload-excel>
          <span class="font14 text_danger" style="margin-left: 15px;" v-if="!execlFile">{{ $t("未导入文件") }}</span>
          <span class="font14 text_blue" style="margin-left: 15px;" v-if="execlFile">{{ $t("已导入文件") }}</span>
          <span class="download font14 text_blue" @click="downloadTem">
            {{
              $t("下载模板")
            }}
          </span>
        </div>
        <div class="ipt_list u-f u-f-ac" v-if="!addMoreCab">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("设备编号") }}：</span>
          </p>
          <el-input v-model="addCabFrom.device_id" :disabled="updateCab" :placeholder="$t('请输入设备编号')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac" v-if="!addMoreCab">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("二维码编号") }}：</span>
          </p>
          <el-input v-model="addCabFrom.qrcode" :placeholder="$t('请输入二维码编号')"></el-input>
        </div>

        <!-- 非直营 -->
        <div class="select_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("设备型号") }}：</span>
          </p>
          <el-select v-model="addDevTypeVal" :placeholder="$t('请选择')" @change="addDevTypeChange">
            <el-option v-for="(item, index) in addDevTypeArr" :key="item.id" :label="item.name"
              :value="index"></el-option>
          </el-select>
        </div>

        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("充电槽数量") }}：</span>
          </p>
          <el-input v-model="addCabFrom.device_num" disabled></el-input>
        </div>

        <div class="div_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("所属代理商") }}：</span>
          </p>
          <div class="content font14 text_black u-f u-f-ac" @click="openAgentList(2)">
            <p class="text-ellipsis">
              {{
                addCabFrom.agent_name ? addCabFrom.agent_name : $t("平台自营")
              }}
            </p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearAgent(2)">{{ $t("清除") }}</button>
        </div>
        <div class="select_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("所属业务员") }}：</span>
          </p>
          <el-select v-model="addSalesmanVal" :placeholder="$t('请选择')" @change="addSalesmanChange">
            <el-option v-for="item in addSalesmanArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="div_box u-f u-f-ac" v-if="shangjia">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("所属商户") }}：</span>
          </p>
          <div class="content font14 text_black u-f u-f-ac" @click="openMerchantList(2)">
            <p class="text-ellipsis">
              {{
                addCabFrom.merchant_name
                ? addCabFrom.merchant_name
                : $t("选择商户")
              }}
            </p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearMerchant(2)">{{ $t("清除") }}</button>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("备注") }}：</span>
          </p>
          <el-input v-model="addCabFrom.memo" :placeholder="$t('请输入备注')" maxlength="18"></el-input>
        </div>
        <div class="select_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("选择状态") }}：</span>
          </p>
          <el-select v-model="addStatusVal" :placeholder="$t('请选择')" @change="addStatusChange">
            <el-option v-for="item in addStatusArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <button class="sub_btn font14 text_white bg_blue" @click="addSubmit" v-if="!updateCab && !addMoreCab">{{ $t("提交")
        }}</button>
        <button class="sub_btn font14 text_white bg_blue" @click="addMoreSubmit" v-if="!updateCab && addMoreCab">{{
          $t("提交") }}</button>
        <button class="sub_btn font14 text_white bg_blue" @click="updateSubmit" v-if="updateCab">{{ $t("修改") }}</button>
      </div>
    </el-dialog>

    <!-- 绑定代理和商户 -->
    <el-dialog :title="$t('绑定代理和商户')" width="1000px" :visible.sync="showBindAgent" :close-on-click-modal="false"
      @close="agentType = 1">
      <div class="order_detail">
        <div class="div_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t('所属代理商') }}：</span>
          </p>
          <div class="content font14 text_black u-f u-f-ac" @click="openAgentList(3)">
            <p class="text-ellipsis" v-if="memusid!=5">
              {{
                bindAgentFrom.agent_name
                ? bindAgentFrom.agent_name
                : $t('平台自营')
              }}
            </p>
            <p class="text-ellipsis" v-else>
              {{
                bindAgentFrom.agent_name
                ? bindAgentFrom.agent_name
                : $t('请选择代理商')
              }}
            </p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearAgent(3)">{{ $t('清除') }}</button>
        </div>
        <div class="select_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t('所属业务员') }}：</span>
          </p>
          <el-select v-model="bindAgentVal" :placeholder="$t('请选择')" @change="bindAgentChange">
            <el-option v-for="item in bindAgentArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="div_box u-f u-f-ac" v-if="shangjia">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t('所属商户') }}：</span>
          </p>
          <div class="content font14 text_black u-f u-f-ac" @click="openMerchantList(3)">
            <p class="text-ellipsis">
              {{
                bindAgentFrom.merchant_name
                ? bindAgentFrom.merchant_name
                : $t('选择商户')
              }}
            </p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearMerchant(3)">{{ $t('清除') }}</button>
        </div>
        <div class="ipt_list u-f">
          <p class="lable u-f">
            <span class="font14 text_black">{{ $t('设备编号') }}：</span>
          </p>
          <el-input type="textarea" autosize v-model="bindAgentFrom.device_id" :placeholder="$t('请输入设备编号')"></el-input>
          <p class="tip font14 text_danger">
            {{ $t('设备号之间请') }}
            <span class="text_blue">{{ $t('换行或回车') }}</span>
            {{ $t('分隔') }},{{ $t('每次最多输入') }}
            <span class="text_blue">100</span>
            {{ $t('台设备号') }}。{{ $t('请确保相应设备没有绑定代理') }}、{{ $t('业务员和商户') }},{{ $t('否则将与原数据解绑') }}
          </p>
        </div>
        <button class="sub_btn font14 text_white bg_blue" @click="bindAgentSubmit">{{ $t('提交') }}</button>
      </div>
    </el-dialog>

    <!-- 重启部分机柜 -->
    <el-dialog :title="$t('重启机柜')" width="900px" :visible.sync="showRestartCab" :close-on-click-modal="false">
      <div class="order_detail">
        <div class="ipt_list u-f u-f-ac" style="width: 290px;">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t('起始序列号') }}：</span>
          </p>
          <el-input v-model="restartMoreFrom.start" :placeholder="$t('请输入序列号')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac" style="width: 290px;">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t('结束序列号') }}：</span>
          </p>
          <el-input v-model="restartMoreFrom.end" :placeholder="$t('请输入序列号')"></el-input>
        </div>
        <p class="font14 text_danger">{{ $t('建议每次不要重启超过100台在线设备') }},{{ $t('防止机器启动时间过长') }}</p>
        <button class="sub_btn font14 text_white bg_blue" @click="resMoreCabSubmit">{{ $t('提交') }}</button>
      </div>
    </el-dialog>

    <!-- 设备详情 -->
    <el-dialog :title="$t('查看机柜信息')" width="900px" :visible.sync="showCabDetail" :close-on-click-modal="false">
      <div class="cab_detail">
        <div class="u-f u-f-ac u-f-jsb" style="margin-bottom: 20px;">
          <span class="font14 text_black">{{ $t('机柜号') }}：{{ cabDetaFrom.cabinet_id }}</span>
          <div class="u-f u-f-ac">
            <span class="font14 text_blue" v-if="cabDetaFrom.is_online == 1">{{ $t('在线') }}</span>
            <span class="font14 text_danger" v-else>{{ $t('离线') }}</span>
            <span class="font14 text_black" style="margin-left: 10px;">{{ $t('信号') }}：{{ cabDetaFrom.signal }}</span>
          </div>
        </div>
        <div class="options_box u-f u-f-ac">
          <button class="btn font14 text_white bg_blue" @click="eject('restart')">{{ $t('重启设备') }}</button>
          <!-- <button class="btn font14 text_white bg_blue" @click="eject('upgrade')">{{ $t('升级设备') }}</button> -->
          <button class="btn font14 text_white bg_blue" @click="eject('openAll')">{{ $t('全部弹出') }}</button>
          <button class="btn font14 text_white bg_blue" @click="eject('borrow')">{{ $t('模拟借出') }}</button>
          <button class="btn font14 text_white bg_blue" @click="eject('trigger')">{{ $t('刷新充氧宝') }}</button>
        </div>
        <!--  -->
        <el-table :data="detailTableData">
          <el-table-column prop="lock" :label="$t('锁孔')"></el-table-column>
          <el-table-column prop="bid" :label="$t('充氧宝')"></el-table-column>
          <el-table-column prop="power" :label="$t('电量')"></el-table-column>
          <el-table-column prop="fault" :label="$t('故障')">
            <template slot-scope="{ row }">
              <span v-if="!row.fault">{{ $t('正常') }}</span>
              <span class="text_danger" v-if="row.fault">{{ $t('故障') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" width="150">
            <template slot-scope="scope">
              <button class="table_btn font12 bg_blue text_white" @click="ejectOpen('open', scope.row)">{{ $t('弹出')
              }}</button>
              <button class="table_btn font12 text_white" :class="scope.row.is_freeze == 0 ? 'bg_danger' : 'bg_green'"
                @click="toggleDisable(scope.row)">{{ scope.row.is_freeze == 0 ? $t('禁用') : $t('解禁') }}</button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 租借统计 -->
    <el-dialog :title="$t('租借统计')" width="900px" :visible.sync="showStatistics" :close-on-click-modal="false">
      <div class="kolea u-f">
        <ul class="u-f1">
          <li class="li font16 text_black">{{ $t('今天租借次数') }}：{{ stat_num.today }}{{ $t('次') }}</li>
          <li class="li font16 text_black">{{ $t('昨天租借次数') }}：{{ stat_num.yesterday }}{{ $t('次') }}</li>
          <li class="li font16 text_black">{{ $t('本周租借次数') }}：{{ stat_num.week }}{{ $t('次') }}</li>
          <li class="li font16 text_black">{{ $t('上周租借次数') }}：{{ stat_num.lastWeek }}{{ $t('次') }}</li>
          <li class="li font16 text_black">{{ $t('本月租借次数') }}：{{ stat_num.month }}{{ $t('次') }}</li>
          <li class="li font16 text_black">{{ $t('上月租借次数') }}：{{ stat_num.lastMonth }}{{ $t('次') }}</li>
          <li class="li font16 text_black">{{ $t('累计租借次数') }}：{{ stat_num.total }}{{ $t('次') }}</li>
        </ul>
        <ul class="u-f1">
          <li class="li font16 text_black">{{ $t('今天订单金额') }}：{{ stat_amount.today }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('昨天订单金额') }}：{{ stat_amount.yesterday }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('本周订单金额') }}：{{ stat_amount.week }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('上周订单金额') }}：{{ stat_amount.lastWeek }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('本月订单金额') }}：{{ stat_amount.month }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('上月订单金额') }}：{{ stat_amount.lastMonth }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('累计订单金额') }}：{{ stat_amount.total }}{{ $t('元') }}</li>
        </ul>
      </div>
      <div class="kolea u-f">
        <ul class="u-f1">
          <li class="li font16 text_black">{{ $t('今天订单实收金额') }}：{{ stat_pay_amount.today }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('昨天订单实收金额') }}：{{ stat_pay_amount.yesterday }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('本周订单实收金额') }}：{{ stat_pay_amount.week }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('上周订单实收金额') }}：{{ stat_pay_amount.lastWeek }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('本月订单实收金额') }}：{{ stat_pay_amount.month }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('上月订单实收金额') }}：{{ stat_pay_amount.lastMonth }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('累计订单实收金额') }}：{{ stat_pay_amount.total }}{{ $t('元') }}</li>
        </ul>
        <ul class="u-f1">
          <li class="li font16 text_black">{{ $t('今天订单实收退款') }}：{{ stat_pay_refund.today }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('昨天订单实收退款') }}：{{ stat_pay_refund.yesterday }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('本周订单实收退款') }}：{{ stat_pay_refund.week }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('上周订单实收退款') }}：{{ stat_pay_refund.lastWeek }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('本月订单实收退款') }}：{{ stat_pay_refund.month }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('上月订单实收退款') }}：{{ stat_pay_refund.lastMonth }}{{ $t('元') }}</li>
          <li class="li font16 text_black">{{ $t('累计订单实收退款') }}：{{ stat_pay_refund.total }}{{ $t('元') }}</li>
        </ul>
      </div>
      <div class="kolea u-f">
        <ul class="u-f1">
          <li class="li font16 text_black">{{ $t('今天租借率') }}：{{ dayrent }}{{ $t('%') }}</li>
          <li class="li font16 text_black">{{ $t('本周租借率') }}：{{ weekrent }}{{ $t('%') }}</li>
          <li class="li font16 text_black">{{ $t('本月租借率') }}：{{ monthrent }}{{ $t('%') }}</li>
        </ul>
      </div>
    </el-dialog>

    <el-dialog @close="huaboclose" :title="`机柜号:${huaboRow.qrcode}`" width="1200px" :visible.sync="transferLog"
      :close-on-click-modal="false">
      <span>时间筛选:</span>
      <el-date-picker style="margin-left: 10px;" v-model="dates" type="daterange" :range-separator="$t('至')"
        :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" align="right" value-format="yyyy-MM-dd"
        @change="datesChange"></el-date-picker>
      <el-button type="primary" style="margin-left: 10px;" @click="resetData">清除</el-button>
      <!-- value-format="yyyy-MM-dd" -->
      <el-table :data="huaboList">
        <el-table-column prop="uname" :label="$t('操作者')" width="160"></el-table-column>
        <el-table-column prop="type" :label="$t('角色')" width="160"></el-table-column>
        <el-table-column prop="ip" :label="$t('ip地址')" width="160"></el-table-column>
        <el-table-column prop="os" :label="$t('操作系统')" width="160"></el-table-column>
        <el-table-column prop="querystring" :label="$t('变更类型')" width="160"></el-table-column>
        <el-table-column prop="relationName" :label="$t('变更后')" width="160"></el-table-column>
        <el-table-column prop="create_time" :label="$t('时间')" width="160"></el-table-column>
      </el-table>
      <div class="pagination_box">
        <el-pagination background @current-change="handlehuaboChange" :current-page="huabo.page"
          :page-size="huabo.page_size" layout="total, prev, pager, next, jumper" :total="huabo.total"></el-pagination>
      </div>
    </el-dialog>
    <!-- 查看二维码 -->
    <el-dialog :visible.sync="showQRcode" width="240px" height="300px" style="height: 450px;" :close-on-click-modal="false">
      <img :src="qrcode_img" style="width: 200px; height: 200px;margin-top: -10px;" />
      <p class="font14 text_black" style="text-align: center;margin: 0;height: 100px; ">{{ qrcode_txt }}</p>
    </el-dialog>

    <agent-list ref="agentList" :type="agentType" :memusid="memusid" :uid="uid" @hide="closeAgentList"></agent-list>
    <merchant-list ref="merchantList" :type="merchantType" :agency_id="agency_id" :uid="uid" :memusid="memusid" @hide="closeMerchantList"></merchant-list>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import agentList from "components/agent-list/agent-list.vue";
import merchantList from "components/merchant-list/merchant-list.vue";
import uploadExcel from "components/upload/me-upload-excel.vue";
import { mapState } from "vuex";
import util from "@/assets/js/util.js";
export default {
  name: "equipment-index",
  data() {
    let that = this;
    return {
      daili:true,
      shangjia:true,
      ruleForm:{
        name:''
      },
      page: 1,
      page_size: 20,
      total: 0,
      qrcode: "",
      device_id: "",
      online_num: "",
      outline_num: "",
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("所有")
        },
        {
          value: 1,
          label: that.$t("在线")
        },
        {
          value: 2,
          label: that.$t("离线")
        }
      ],
      clientVal1: 0,
      clientArr1: [
        {
          value: 0,
          label: that.$t("所有")
        },
        {
          value: 1,
          label: that.$t("已绑")
        },
        {
          value: 2,
          label: that.$t("未绑")
        }
      ],
      outlineDayVal: 0,
      outlineDayArr: [
        {
          value: 0,
          label: that.$t("所有")
        },
        {
          value: 3,
          label: 3 + that.$t("天")
        },
        {
          value: 7,
          label: 7 + that.$t("天")
        },
        {
          value: 15,
          label: 15 + that.$t("天")
        }
      ],
      modelVal: '',
      modelType: '',
      salesmanVal: 0,
      salesmanArr: [
        {
          id: 0,
          name: that.$t("选择业务员")
        }
      ],
      agentType: 1,
      merchantType: 1,
      agent: "",
      agent_id: "",
      merchant: "",
      merchant_id: "",
      tableData: [],
      updateCab: false,
      addMoreCab: false,
      showAddCab: false,
      addCabFrom: {
        id: "",
        device_id: "",
        qrcode: "",
        device_type: "",
        device_num: "",
        agent_id: -1,
        agent_name: "",
        merchant_id: "",
        merchant_name: "",
        memo: "", //备注
      },
      addDevTypeVal: 0,
      addDevTypeArr: [
        {
          id: 0,
          name: that.$t("请选择设备型号"),
          num: 0
        }
      ],
      own_price: '',
      addSalesmanVal: 0,
      addSalesmanArr: [
        {
          id: 0,
          name: that.$t("选择业务员")
        }
      ],
      addStatusVal: 0,
      addStatusArr: [
        {
          value: 0,
          label: that.$t("正常")
        },
        {
          value: 1,
          label: that.$t("异常")
        }
      ],
      execlFile: "",
      showBindAgent: false,
      bindAgentVal: 0,
      bindAgentArr: [
        {
          id: 0,
          name: that.$t("选择业务员")
        }
      ],
      bindAgentFrom: {
        device_id: "",
        agent_id: -1,
        agent_name: "",
        merchant_id: "",
        merchant_name: ""
      },
      showRestartCab: false,
      restartMoreFrom: {
        start: "",
        end: ""
      },
      showCabDetail: false,
      cabDetaFrom: {
        id: "",
        cabinet_id: "",
        is_online: 1,
        signal: ""
      },
      detailTableData: [],
      showStatistics: false,
      stock_num: '',
      stat_num: {},
      stat_amount: {},
      stat_pay_amount: {},
      stat_pay_refund: {},
      dayrent: 0,
      monthrent: 0,
      weekrent: 0,
      showQRcode: false,
      qrcode_img: "",
      qrcode_txt: "",
      //划拨日志dialog 开关
      transferLog: false,
      huaboList: [],
      huabo: {
        page: 1,
        page_size: 10,
        total: 0,
        start: "",
        end: ""
      },
      huaboRow: {},
      dates: ""
    };
  },
  components: {
    agentList,
    merchantList,
    uploadExcel
  },
  computed: {
    ...mapState(["permissions", 'equipmentModel', "memusid", "uid", "name"]),
    m_agency_id() {
      if (this.agentType == 1) {
        return this.agent_id
      } else if (this.agentType == 2) {
        return this.addCabFrom.agent_id
      } else if (this.agentType == 3) {
        return this.bindAgentFrom.agent_id
      }
    },
    m_employee_id() {
      if (this.agentType == 1) {
        return this.salesmanVal
      } else if (this.agentType == 2) {
        return this.addSalesmanVal
      } else if (this.agentType == 3) {
        return this.bindAgentVal
      }
    },
  },
  activated() {
    let query = this.$route.query
    if (query.merchant_id) {
      this.merchant = query.merchant
      this.merchant_id = query.merchant_id
      this.getData();
    }
  },
  mounted() {
    this.modelVal = this.equipmentModel[0].name

    if(this.memusid == 5){
      this.daili = false;
      
      this.agent_id = this.uid;
      this.bindAgentFrom.agent_id = this.uid;
      // this.bindAgentFrom.agent_name = "请选择代理商";
      this.addCabFrom.agent_id = this.uid;
      this.aid = this.uid;
      // console.log("打印一下this.aid")
      // console.log(this.aid);
      // this.agent = this.name;
    }else if(this.memusid == 6){
      this.daili = false;
      this.shangjia = false;
      //查询一下该商户管理员下面啊的所有商户的设备
      console.log("打印一下");
      this.getAllMerchantDevice();
      this.bindAgentFrom.merchant_id = this.uid;
      this.addCabFrom.merchant_id = this.uid;
      // this.getAgentData()
      // this.merchant_id = this.uid;
      return;
      // this.merchant = this.name;
    }

    // agent_id

    this.getData();
  },
  methods: {
    //重置 查询 分页变量
    resetData() {
      this.huabo = {
        page: 1,
        page_size: 10,
        total: 0,
        start: "",
        end: ""
      }
      this.dates = ""
      this.gethuaboList(this.huaboRow)
    },
    //时间控件触发change
    datesChange(arr) {
      this.huabo.start = arr[0]
      this.huabo.end = arr[1]
      this.gethuaboList(this.huaboRow)
    },
    //dialog关闭回调
    huaboclose() { },
    // 分页点击选择 触发回调
    handlehuaboChange(val) {
      this.huabo.page = Number(val);
      this.gethuaboList(this.huaboRow)
    },
    // 划拨日志打开事件
    transferLogShow(row) {
      this.huabo = {
        page: 1,
        page_size: 10,
        total: 0,
        start: "",
        end: ""
      }
      this.transferLog = true
      this.$nextTick(() => {
        this.huaboRow = row
        this.gethuaboList(row)
      })

    },
    //划拨日志数据请求
    gethuaboList(row) {
      util
        .$http("/equipment/changeLog?page=" + this.huabo.page, {
          device_id: row.cabinet_id,
          page_size: this.huabo.page_size,
          start: this.huabo.start,
          end: this.huabo.end
        })
        .then(res => {
          console.log(res.data.list)
          if (res.code == 1) {
            this.huaboList = res.data.list
            this.huabo.total = res.data.total
          }
        });
    },


    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.device_id = ''
      this.qrcode = ''
      this.clientVal = 0
      this.clientVal1 = 0
      this.outlineDayVal = 0
      this.agent_id = this.agent_id
      this.salesmanVal = 0
      this.merchant_id = ''
      this.getData()
    },
    getAllMerchantDevice(type){
      console.log("哎哎哎");
      if (type == 'search') { this.page = 1 }
      util
        .$http("/equipment/merchantDeviceindex?page=" + this.page, {
          page_size: this.page_size,
          cabinet_id: this.device_id,
          qrcode: this.qrcode,
          is_online: this.clientVal,
          is_bind: this.clientVal1,
          model: this.modelType,
          employee_id: this.salesmanVal,
          uid: this.uid,
          // outline_day: this.outlineDayVal
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.stock_num = res.data.stock_num;
            this.outline_num = res.data.outline_num;
            this.online_num = res.data.online_num;
            this.tableData = res.data.list;
          }
        });
    },
    getData(type) {
      if (type == 'search') { this.page = 1 }
      if ((this.merchant_id == null||this.merchant_id == "") && this.memusid == 6){
        console.log(this.merchant_id);
        this.getAllMerchantDevice();
        return;
      }
      console.log("打印一下！！！");
      util
        .$http("/equipment/index?page=" + this.page, {
          page_size: this.page_size,
          cabinet_id: this.device_id,
          qrcode: this.qrcode,
          is_online: this.clientVal,
          is_bind: this.clientVal1,
          model: this.modelType,
          agency_id: this.agent_id,
          employee_id: this.salesmanVal,
          sid: this.merchant_id,
          // outline_day: this.outlineDayVal
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.stock_num = res.data.stock_num;
            this.outline_num = res.data.outline_num;
            this.online_num = res.data.online_num;
            this.tableData = res.data.list;
          }
        });
    },
    clientChange(val) {
      this.clientVal = val;
    },
    clientChange1(val) {
      this.clientVal1 = val;
    },
    modelChange(val) {
      this.modelVal = this.equipmentModel[val].name
      this.modelType = this.equipmentModel[val].id
    },
    outlineChange(val) {
      this.outlineDayVal = val;
    },
    salesmanChange(val) {
      this.salesmanVal = val;
    },
    openAgentList(type) {
      this.agentType = type;
      this.$refs.agentList.show();
    },
    closeAgentList(data, type) {
      let employArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      if (type == 1) {
        this.agency_id = data.id
        this.agent_id = data.id;
        this.agent = data.name;
        this.merchant_id = "";
        this.merchant = "";
        this.getEmployee(data.id, res => {
          this.salesmanArr = [...employArr, ...res];
          this.salesmanVal = 0;
        });
      } else if (type == 2) {
        this.agency_id = data.id
        this.addCabFrom.agent_id = data.id;
        this.addCabFrom.agent_name = data.name;
        this.addCabFrom.merchant_id = "";
        this.addCabFrom.merchant_name = "";
        this.getEmployee(data.id, res => {
          this.addSalesmanArr = [...employArr, ...res];
          this.addSalesmanVal = 0;
        });

      } else if (type == 3) {
        this.agency_id = data.id
        this.bindAgentFrom.agent_id = data.id;
        this.bindAgentFrom.agent_name = data.name;
        this.bindAgentFrom.merchant_id = "";
        this.bindAgentFrom.merchant_name = "";
        this.getEmployee(data.id, res => {
          this.bindAgentArr = [...employArr, ...res];
          this.bindAgentVal = 0;
        });
      }
    },
    clearAgent(type) {
      if (type == 1) {
        // if(this)
        if(this.memusid == 5){
          this.agent_id = this.uid;
          this.agent = this.name;
        }else{
          this.agent_id = "";
          this.agent = "";
        }
        
        this.merchant_id = "";
        this.merchant = "";
        this.salesmanArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.salesmanVal = 0;
      } else if (type == 2) {
        this.addCabFrom.agent_id = -1;
        this.addCabFrom.agent_name = "";
        this.addCabFrom.merchant_id = "";
        this.addCabFrom.merchant_name = "";
        this.addSalesmanArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.addSalesmanVal = 0;

        if(this.memusid == 5){
          console.log("清除了哦");
          console.log("已经到最后了奥")
          // this.addCabFrom.agent_id = data.id;
          // this.addCabFrom.agent_name = data.name;
          this.addCabFrom.agent_id = this.uid;
          this.addCabFrom.agent_name = this.name;
        }
      } else if (type == 3) {
        this.bindAgentFrom.agent_id = -1;
        this.bindAgentFrom.agent_name = "";
        this.bindAgentFrom.merchant_id = "";
        this.bindAgentFrom.merchant_name = "";
        this.bindAgentArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        if(this.memusid == 5){
          console.log("清除了哦");
          console.log("已经到最后了奥")
          // this.addCabFrom.agent_id = data.id;
          // this.addCabFrom.agent_name = data.name;
          this.bindAgentFrom.agent_id = this.uid;
          this.bindAgentFrom.agent_name = this.name;
        }
        this.bindAgentVal = 0;
      }
    },
    openMerchantList(type) {
      this.merchantType = type;
      
      // console.log(this.bindAgentFrom.agent_id);
      // this.bindAgentFrom.agent_id = 
      this.$refs.merchantList.show();
    },
    closeMerchantList(data, type) {
      if (type == 1) {
        this.merchant_id = data.id;
        this.merchant = data.name;
      } else if (type == 2) {
        this.addCabFrom.merchant_id = data.id;
        this.addCabFrom.merchant_name = data.name;
      } else if (type == 3) {
        this.bindAgentFrom.merchant_id = data.id;
        this.bindAgentFrom.merchant_name = data.name;
      }
    },
    clearMerchant(type) {
      if (type == 1) {
        this.merchant_id = "";
        this.merchant = "";
      } else if (type == 2) {
        this.addCabFrom.merchant_id = "";
        this.addCabFrom.merchant_name = "";
      } else if (type == 3) {
        this.bindAgentFrom.merchant_id = "";
        this.bindAgentFrom.merchant_name = "";
      }
    },
    addCabinet() {
      this.addCabFrom = {
        id: "",
        device_id: "",
        qrcode: "",
        device_type: "",
        device_num: "",
        agent_id: -1,
        agent_name: "",
        merchant_id: "",
        merchant_name: "",
        memo: "", //备注
      };

      if(this.memusid == 5){
        this.addCabFrom.agent_id = this.uid;
        this.addCabFrom.agent_name = this.name;
      }

      this.addSalesmanArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];

      this.addSalesmanVal = 0;
      this.addStatusVal = 0;
      this.agentType = 2;
      this.updateCab = false;
      this.addMoreCab = false;
      this.showAddCab = true;

      util
        .$http("/equipment/info", {
          id: 0
        })
        .then(res => {
          console.log("查询一下子奥");
          console.log(res.data);
          if (res.code == 1) {
            this.addDevTypeArr = res.data.producer;
            this.addCabFrom.agent_id = res.data.agency_id;
            this.addCabFrom.agent_name = res.data.agency_name;
            this.addDevTypeVal = res.data.producer[0].name;
            this.addCabFrom.device_type = res.data.producer[0].id;
            this.addCabFrom.device_num = res.data.producer[0].num;
            this.own_price = res.data.producer[0].price || '';
            if(this.memusid == 5){
              console.log("已经到最后了奥")
              this.addCabFrom.agent_id = this.uid;
              this.addCabFrom.agent_name = this.name;
            }
          }
        });
      
      
    },
    addDevTypeChange(val) {
      this.addDevTypeVal = this.addDevTypeArr[val].name;
      this.addCabFrom.device_num = this.addDevTypeArr[val].num;
      this.addCabFrom.device_type = this.addDevTypeArr[val].id;
      this.own_price = this.addDevTypeArr[val].price || ''
    },
    addSalesmanChange(val) {
      this.addSalesmanVal = val;
    },
    addStatusChange(val) {
      this.addStatusVal = val;
    },
    addSubmit() {
      util
        .$http("/equipment/add", {
          cabinet_id: this.addCabFrom.device_id,
          qrcode: this.addCabFrom.qrcode,
          model: this.addCabFrom.device_type,
          device_num: this.addCabFrom.device_num,
          agency_id: this.addCabFrom.agent_id,
          employee_id: this.addSalesmanVal,
          sid: this.addCabFrom.merchant_id,
          is_fault: this.addStatusVal,
          memo: this.addCabFrom.memo, //备注
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.updateCab = false;
            this.addMoreCab = false;
            this.showAddCab = false;
            this.agentType = 1
            this.getData();
            this.addCabFrom = {
              id: "",
              device_id: "",
              qrcode: "",
              device_type: "",
              device_num: "",
              agent_id: -1,
              agent_name: "",
              merchant_id: "",
              merchant_name: "",
              memo: "", //备注
            };
            this.addSalesmanArr = [
              {
                id: 0,
                name: this.$t("选择业务员")
              }
            ];
            this.addSalesmanVal = 0;
            this.addStatusVal = 0;
          }
        });
    },
    addMoreSubmit() {
      let formData = new FormData();
      formData.append("file", this.execlFile);
      formData.append("model", this.addCabFrom.device_type);
      formData.append("device_num", this.addCabFrom.device_num);
      formData.append("agency_id", this.addCabFrom.agent_id);
      formData.append("employee_id", this.addSalesmanVal);
      formData.append("sid", this.addCabFrom.merchant_id);
      formData.append("is_fault", this.addStatusVal);
      formData.append("memo", this.addCabFrom.memo); //备注
      util.$http("/equipment/execlAdd", formData).then(res => {
        if (res.code == 1) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.updateCab = false;
          this.addMoreCab = false;
          this.showAddCab = false;
          this.agentType = 1
          this.getData();
          this.addCabFrom = {
            id: "",
            device_id: "",
            qrcode: "",
            device_type: "",
            device_num: "",
            agent_id: -1,
            agent_name: "",
            merchant_id: "",
            merchant_name: "",
            memo: "", //备注
          };
          this.addSalesmanArr = [
            {
              id: 0,
              name: this.$t("选择业务员")
            }
          ];
          this.addSalesmanVal = 0;
          this.addStatusVal = 0;
          this.execlFile = "";
        } else if (res.code == 301) {
          this.$confirm(
            this.$t("表格上传失败") + "," + this.$t("是否要下载错误日志")
          )
            .then(() => {
              window.location.href = res.msg;
            })
            .catch(() => { });
        }
      });
    },
    updateSubmit() {
      util
        .$http("/equipment/edit", {
          id: this.addCabFrom.id,
          cabinet_id: this.addCabFrom.device_id,
          qrcode: this.addCabFrom.qrcode,
          model: this.addCabFrom.device_type,
          device_num: this.addCabFrom.device_num,
          agency_id: this.addCabFrom.agent_id,
          employee_id: this.addSalesmanVal,
          sid: this.addCabFrom.merchant_id,
          is_fault: this.addStatusVal,
          memo: this.addCabFrom.memo, //备注
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.updateCab = false;
            this.addMoreCab = false;
            this.showAddCab = false;
            this.agentType = 1
            this.getData();
            this.addCabFrom = {
              id: "",
              device_id: "",
              qrcode: "",
              device_type: "",
              device_num: "",
              agent_id: -1,
              agent_name: "",
              merchant_id: "",
              merchant_name: "",
              memo: "", //备注
            };
            this.addSalesmanArr = [
              {
                id: 0,
                name: this.$t("选择业务员")
              }
            ];
            this.addSalesmanVal = 0;
            this.addStatusVal = 0;
          }
        });
    },
    addMoreCabinet() {
      this.addCabFrom = {
        id: "",
        device_id: "",
        qrcode: "",
        device_type: "",
        device_num: "",
        agent_id: -1,
        agent_name: "",
        merchant_id: "",
        merchant_name: "",
        memo: "", //备注
      };
      this.addSalesmanArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      this.addSalesmanVal = 0;
      this.addStatusVal = 0;
      this.agentType = 2
      this.execlFile = "";
      this.updateCab = false;
      this.addMoreCab = true;
      this.showAddCab = true;
      util
        .$http("/equipment/info", {
          id: 0
        })
        .then(res => {
          if (res.code == 1) {
            this.addDevTypeArr = res.data.producer;
            this.addCabFrom.agent_id = res.data.agency_id;
            this.addCabFrom.agent_name = res.data.agency_name;
            this.addDevTypeVal = res.data.producer[0].name;
            this.addCabFrom.device_type = res.data.producer[0].id;
            this.addCabFrom.device_num = res.data.producer[0].num;
            this.own_price = res.data.producer[0].price || ''
          }
        });
    },
    execlSuccess(file) {
      this.execlFile = file;
    },
    downloadTem() {
      window.location.href = 'https://cdb.workair.vip/statics/device.xlsx'
    },
    bindAgent() {
      this.showBindAgent = true;
      this.agentType = 3
      if(this.memusid==5){
        this.bindAgentFrom = {
          device_id: "",
          agent_id: this.agent_id,
          agent_name: this.agent,
          merchant_id: "",
          merchant_name: ""
        };
      }else{
        this.bindAgentFrom = {
          device_id: "",
          agent_id: -1,
          agent_name: "",
          merchant_id: "",
          merchant_name: ""
        };
      }
      // this.bindAgentFrom.agent_id
      
      this.bindAgentArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      this.bindAgentVal = 0;
    },
    bindAgentChange(val) {
      this.bindAgentVal = val;
    },
    bindAgentSubmit() {
      let str = this.bindAgentFrom.device_id.replace(/\n/g, ',')
      util
        .$http("/equipment/agencyBind", {
          ids: str,
          agency_id: this.bindAgentFrom.agent_id,
          employee_id: this.bindAgentVal,
          sid: this.bindAgentFrom.merchant_id
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.bindAgentFrom = {
              device_id: "",
              agent_id: -1,
              agent_name: "",
              merchant_id: "",
              merchant_name: ""
            };
            this.bindAgentArr = [
              {
                id: 0,
                name: this.$t("选择业务员")
              }
            ];
            this.bindAgentVal = 0;
            this.showBindAgent = false;
            this.agentType = 1
            this.getData();
          }
        });
    },
    restartMoreCabinet() {
      this.showRestartCab = true;
    },
    resMoreCabSubmit() {
      util
        .$http("/equipment/restart", {
          start_id: this.restartMoreFrom.start,
          end_id: this.restartMoreFrom.end
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.showRestartCab = false;
          }
        });
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    deviceDetail(row) {
      this.cabDetaFrom = {
        id: row.id,
        cabinet_id: "",
        is_online: 1,
        signal: ""
      }
      this.detailTableData = []
      this.showCabDetail = true;
      setTimeout(() => {
        util
          .$http("/equipment/detail", {
            id: row.id
          })
          .then(res => {
            if (res.code == 1) {
              this.detailTableData = res.data.device;
              this.cabDetaFrom = {
                id: row.id,
                cabinet_id: res.data.cabinet_id,
                is_online: res.data.is_online,
                signal: res.data.signal
              };
            }
          });
      }, 150);
    },
    eject(type) {
      this.$confirm(this.$t("是否要进行操作"))
        .then(() => {
          util
            .$http("/equipment/operate", {
              cabinet_id: this.cabDetaFrom.cabinet_id,
              type
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.deviceDetail({
                  id: this.cabDetaFrom.id
                })
              }
            });
        })
        .catch(() => { });
    },
    ejectOpen(type, row) {
      this.$confirm(this.$t("是否要进行操作"))
        .then(() => {
          util
            .$http("/equipment/operate", {
              cabinet_id: this.cabDetaFrom.cabinet_id,
              type,
              lock_id: row.lock
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.deviceDetail({
                  id: this.cabDetaFrom.id
                })
              }
            });
        })
        .catch(() => { });
    },
    toggleDisable(row) {
      let is_forbid = row.is_freeze == 0 ? 1 : 0
      this.$confirm(this.$t("是否要进行操作"))
        .then(() => {
          util
            .$http("/equipment/freeze", {
              cabinet_id: this.cabDetaFrom.cabinet_id,
              is_forbid,
              lock_id: row.lock
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.deviceDetail({
                  id: this.cabDetaFrom.id
                })
              }
            });
        })
        .catch(() => { });
    },
    updateDevice(row) {
      this.updateCab = true;
      this.addMoreCab = false;
      this.showAddCab = true;
      this.agentType = 2
      setTimeout(() => {
        util
          .$http("/equipment/info", {
            id: row.id
          })
          .then(res => {
            if (res.code == 1) {
              this.addCabFrom = {
                id: res.data.id,
                device_id: res.data.cabinet_id,
                qrcode: res.data.qrcode,
                device_type: res.data.model,
                device_num: res.data.device_num,
                agent_id: res.data.agency_id,
                agent_name: res.data.agency_name,
                merchant_id: res.data.sid,
                merchant_name: res.data.seller_name,
                memo: res.data.memo, //备注
              };
              this.addSalesmanArr = res.data.employeeList;
              this.addSalesmanVal = res.data.employee_id;
              this.addStatusVal = Number(res.data.is_fault);
              this.addDevTypeArr = res.data.producer;
              for (let item of res.data.producer) {
                if (item.id == res.data.model) {
                  this.addDevTypeVal = item.name
                  this.own_price = item.price || ''
                }
              }

            }
          });
      }, 150);
    },
    statistics(row) {
      this.showStatistics = true;
      setTimeout(() => {
        util
          .$http("/equipment/trend", {
            id: row.id
          })
          .then(res => {
            if (res.code == 1) {
              this.stat_num = res.data.num;
              this.stat_amount = res.data.amount;
              this.stat_pay_amount = res.data.pay_amount;
              this.stat_pay_refund = res.data.pay_refund;
              this.dayrent = res.data.dayrent;
              this.weekrent = res.data.weekrent;
              this.monthrent = res.data.monthrent;
            }
          });
      }, 150);
    },
    deleteCanTab(row) {
      this.$confirm(this.$t("是否要删除当前机柜"))
        .then(() => {
          util
            .$http("/equipment/delete", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => { });
    },
    getEmployee(id, callback) {
      util
        .$http("/seller/employeeList", {
          id
        })
        .then(res => {
          if (res.code == 1) {
            callback(res.data);
          }
        });
    },
    viewQrcode(qrcode) {
      this.showQRcode = true;
      this.qrcode_img = util.config.host + "/auth/qrcode?type=device&text=" + qrcode;
      this.qrcode_txt = qrcode;
      console.log("查看一下二维码图片")
      console.log(this.qrcode_img)
      console.log(this.qrcode_txt);
    }
  }
};
</script>

<style scoped>
.head_search {
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}

.head_search .ipt_box .el-input {
  width: 200px;
}

.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}

.head_search .select_box .el-select {
  width: 200px;
}

.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}

.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}

.head_search .div_box .content:active {
  border-color: #409eff;
}

.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}

.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}

.head_search .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 21px;
  cursor: pointer;
  border-radius: 4px;
}

.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}

.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}

.head_options .txt_list {
  font-weight: bold;
  margin-right: 25px;
}

.iconfont {
  font-size: 15px;
  margin-right: 5px;
}

.circle {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 100%;
}

.qrcode {
  cursor: pointer;
  margin: 0;
}

.cabinet_status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
}

.table_btn {
  cursor: pointer;
  padding: 7px 10px;
  border: 0;
  outline: 0;
  border-radius: 4px;
}

.table_btn:nth-child(1) {
  margin-right: 15px;
}

.zhi_img {
  width: 20px;
  height: 20px;
  margin-left: 5px;
}

.pagination_box {
  padding-top: 30px;
}

.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}

.order_detail {
  padding-left: 50px;
}

.order_detail .execl_list {
  margin-bottom: 20px;
}

.order_detail .execl_list .lable {
  width: 115px;
  margin: 0;
}

.order_detail .execl_list .download {
  cursor: pointer;
  margin-left: 15px;
}

.order_detail .ipt_list {
  margin-bottom: 20px;
}

.order_detail .ipt_list .lable {
  min-width: 115px;
  margin: 0;
}

.order_detail .ipt_list .el-input {
  width: 170px;
}

.order_detail .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}

.order_detail .ipt_list .el-textarea {
  width: 300px;
}

.order_detail .ipt_list .tip {
  width: 300px;
  margin: 0 0 0 15px;
}

.order_detail .select_box {
  margin-bottom: 20px;
}

.order_detail .select_box .lable {
  min-width: 115px;
  margin: 0;
}

.order_detail .select_box .el-select {
  width: 170px;
}

.order_detail .div_box {
  margin-bottom: 20px;
}

.order_detail .div_box .lable {
  min-width: 115px;
  margin: 0;
}

.order_detail .div_box .content {
  width: 170px;
  height: 36px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}

.order_detail .div_box .content:active {
  border-color: #409eff;
}

.order_detail .div_box .btn {
  width: 60px;
  height: 36px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}

.order_detail .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 25px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
  margin-left: 100px;
  margin-top: 20px;
}

.brokerage_box {
  margin-bottom: 20px;
  padding-left: 100px;
}

.brokerage_box .div_box_b .content {
  width: 130px;
  height: 36px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}

.brokerage_box .div_box_b .content:active {
  border-color: #409eff;
}

.brokerage_box .div_box_b .btn {
  width: 60px;
  height: 36px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}

.brokerage_box .ipt_list_b {
  margin-left: 15px;
}

.brokerage_box .ipt_list_b .lable {
  margin: 0;
}

.brokerage_box .ipt_list_b .el-input {
  width: 60px;
}

.brokerage_box .el-input_b .el-input__inner {
  height: 36px;
  line-height: 36px;
}

.brokerage_box .ipt_list_b .tip {
  width: 300px;
  margin: 0 0 0 15px;
}

.brokerage_box .delete {
  width: 60px;
  height: 36px;
  border: 0;
  outline: 0;
  cursor: pointer;
  margin-left: 20px;
  border-radius: 4px;
  box-sizing: border-box;
}

.cab_detail .options_box {
  margin-bottom: 20px;
}

.cab_detail .options_box .btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}

.kolea ul {
  list-style: none;
  padding-left: 50px;
  box-sizing: border-box;
}

.kolea .li {
  margin-bottom: 10px;
}
</style>
<style>
.order_detail .ipt_list .el-textarea__inner {
  min-height: 90px !important;
}
</style>
